<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 8000px;
        }

        a {
            color: #FFF;
        }

        .actGotop {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 150px;
            height: 195px;
            display: none;
            z-index: 100;
        }

        .actGotop a, .actGotop a:link {
            width: 150px;
            height: 195px;
            display: inline-block;
            background: url(images/gotop.png) no-repeat;
            outline: none;
        }

        .actGotop a:hover {
            width: 150px;
            height: 195px;
            background: url(images/gotop.gif) no-repeat;
            outline: none;
        }
    </style>


</head>
<body>
<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>


<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {

        $(window).scroll(function () {
            if ($(this).scrollTop() >= 1000) {
                $(".actGotop").fadeIn(1500);

            } else {
                $(".actGotop").fadeOut(1500);
            }
        })

        $(".actGotop").click(function () {
            $("body,html").animate({scrollTop: 0},1000);
        })

    });
</script>
</body>
</html>